<template>
  <view class="page">
    <scroll-view class="main-page" scroll-y="true">
      <view class="list-items"
        v-for="(item, index) in loopData"
        :key="index"
        @click="gotoDetail(item)">
        <view class="out-box">
          <view class="image">
            <!-- <image class="img" :src="item.experiment_thumb_url"
            ></image> -->
          </view>
          <view class="text-wrapper">
            <view class="name">{{ item.name }}</view>
            <view class="teacher-name">教师姓名：{{ item.teacher_name }}</view>
            <view class="join-time">加入时间：{{item.created}}</view>
          </view>
        </view>
      </view>
      <view class="join-box">
        <view class="join-new" @click="openJoin">
          <image class="icon" src="./img/plus.png"></image>
          加入新班级
        </view>
      </view>
    </scroll-view>
    <!-- 弹窗 -->
    <uni-popup ref="popup"
      background-color="#fff"
      borderRadius="12px 12px 0px 0px"
      :mask-click="false">
      <view class="popup-content" v-if="!joinSucess">
        <view class="popup-header">
          加入新班级
          <view class="close-icon" @click="closePopup">
            <image
              class="close-icon-image"
              referrerpolicy="no-referrer"
              src="./img/close.png"
            />
          </view>
        </view>
        <view class="popup-body">
          <view class="teacher-input-box">
            <input class="popup-input" placeholder="请输入教师姓名" v-model="teacher_name" />
            <view class="tip">{{ tip }}</view>
          </view>
          <view class="code-input-box">
            <input class="popup-input" placeholder="请输入班级邀请码" v-model="code" />
          </view>
          <view class="join-btn" @click="requestJoin">申请加入</view>
        </view>
      </view>
      <view class="popup-content" v-else>
        <view class="popup-header">
          加入新班级
          <view class="close-icon" @click="closePopup">
            <image
              class="close-icon-image"
              referrerpolicy="no-referrer"
              src="./img/close.png"
            />
          </view>
        </view>
        <view class="popup-body">
          <view class="done-img">
            <image class="img" src="./img/done-img.png"></image>
          </view>
          <view class="title-a">欢迎你，{{student_name}}同学</view>
          <view class="content-text">你已成功加入{{school_name}}学校{{teacher_name}}老师的班级，如需加入其他老师的班级，请在“我的-我的班级”模块中继续添加。</view>
          <view class="join-btn" @click="done">完成</view>
        </view>
      </view>
    </uni-popup>
    <bottomBackBtn v-if="showButtom"></bottomBackBtn>
  </view>
</template>
<script>
export default {
  data() {
    return {
      loopData: [],
      showButtom: true,
      tip: '',
      teacher_name: '',
      code: '',
      joinSucess: false,
      school_name: '',
      student_name: ''
    };
  },
  async onLoad() {
    await this.loadData()
  },
  methods: {
    async loadData(){
      if (this.isFinish && !this.triggered) {
        return
      }
      let param = {
        current: 1,
        pageSize: 99
      }
      let res = await this.API.ClassPagedList(param)
      
      if(res){
        this.loopData = res.data
      }
      console.log(this.loopData)
    },
	  gotoDetail(item){
      // uni.navigateTo({
      //   url: '/pages/index/detail?experiment_id='+ item.experiment_id
      // });
	  },
    openJoin() {
      this.showButtom = false
      this.joinSucess = false
      this.teacher_name = ''
      this.code = ''
      this.$refs.popup.open('bottom')
    },
    closePopup() {
      this.$refs.popup.close()
      this.showButtom = true
    },
    async requestJoin() {
      let res = await this.API.StudentJoinClass({
        teacher_name: this.teacher_name,
        invide_code: this.code
      })
      if (res) {
        this.joinSucess = true
      }
    },
    done() {
      this.closePopup()
      this.loadData()
    }
  },
};
</script>
<style lang="less" scoped>
.popup-content {
  padding-top: 48rpx;
  .popup-header {
    padding: 0 48rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 34rpx;
    color: #262626;
    height: 50rpx;
    line-height: 50rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .close-icon{
      width: 40rpx;
      height: 40rpx;
      .close-icon-image{
        width: 100%;
        height: 100%;
      }
    }
  }
  .popup-body {
    padding: 32rpx 56rpx calc(32rpx + env(safe-area-inset-bottom)) 56rpx;

    .join-btn {
      width: 100%;
      height: 92rpx;
      background: #2776FF;
      color: #fff;
      border-radius: 12rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      text-align: center;
      line-height: 92rpx;
    }
    .popup-input {
      height: 128rpx;
      line-height: 128rpx;
      background: #FFFFFF;
      box-shadow: inset 0px -1px 0px 0px #E6EBF1;
      font-size: 32rpx;
      color: #262626;
      &::placeholder {
        color: #BFBFBF;
        font-weight: 400;
        font-size: 32rpx;
      }
    }
    .tip {
      height: 48rpx;
      line-height: 48rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #FF4D4F;
    }
    .teacher-input-box {
      height: 176rpx;
    }
    .code-input-box {
      height: 230rpx;
    }
    .done-img {
      height: 266rpx + 60rpx;
      padding-top: 60rpx;
      display: flex;
      justify-content: center;
      .img {
        width: 322rpx;
        height: 266rpx;
      }
    }
    .title-a {
      margin-top: 56rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #111A34;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
    }
    .content-text {
      margin-top: 24rpx;
      height: 218rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #595959;
      line-height: 32rpx;
      text-align: right;
      padding: 0 130rpx;
    }
  }
}
.page {
  background-color: rgba(248, 248, 248, 1);
  position: relative;
  width: 750rpx;
  height: 100%;
  .main-page {
    height: calc(100% - 144rpx - env(safe-area-inset-bottom));
    padding: 24rpx 0 24rpx 0;
    .list-items {
      margin-bottom: 24rpx;
      width: 100%;
      height: 260rpx;
      padding: 32rpx;
      background-color: #fff;
      .out-box {
        width: 100%;
        height: 100%;
        border-radius: 16rpx;
        border: 2rpx solid #E6EBF1;
        display: flex;
        padding: 24rpx;
        .image {
          width: 92rpx;
          height: 92rpx;
          background-color: #d1d1d1;
          .img {
            width: 100%;
            height: 100%;
          }
        }
        .text-wrapper {
          margin-left: 24rpx;
          .name {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 32rpx;
            color: #333333;
            line-height: 36rpx;
            height: 36rpx;
          }
          .teacher-name {
            margin-top: 18rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #666666;
            line-height: 40rpx;
            height: 40rpx;
          }
          .join-time {
            margin-top: 4rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #666666;
            line-height: 40rpx;
          }
        }
      }
    }
    .join-box {
      padding: 24rpx;
    }
    .join-new {
      width: 100%;
      height: 92rpx;
      background-color: #fff;
      border-radius: 12rpx;
      border: 2rpx solid #BEC4CA;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 88rpx;
      .icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 16rpx;
      }
    }
  }
}
</style>
